<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <p>段落</p>
        <span>span 小盒子</span>
    </div>

</body>
<script>
    /* 父子节点常用属性
     *childNodes 只读属性 获取一个节点的所有子节点的实时的集合 集合是动态变化的 
     *children   只读属性 返回一个节点的所有子元素节点的集合   是一个动态更新的HTML元素集合
     *firstChild 只读属性 返回该节点的第一个子节点   如果该节点没有子节点则返回null
     *lastChild  只读属性 返回该节点的最后一个子节点 如果该节点没有子节点则返回null 
     *parentNode 返回一个当前节点的父节点   如果没有这样的节点  比如说这个节点是树结构的顶端或者没有插入一颗树中 这个属性返回null
     *parentElement   返回当前节点的父元素节点  如果该元素没有父节点 或者父节点不是一个DOM元素 返回null  */

    var box = document.getElementById("box")
    console.log(box.childNodes) //获取所有类型的子节点
    console.log(box.children) //获取所有类型的子元素节点

    // 获取父级
    console.log(box.parentNode)
</script>

</html>